<template>
	<view class="applyLive_info">
		<view class="uni-form-item">
			<view class="Name">姓 &nbsp; 名: </view>
			<input maxlength="20" class="uni-input" placeholder-style="color:#c7c7c7" focus placeholder="请输入姓名" v-model="auth_name"/>
		</view>
		<view class="uni-form-item">
			<view class="Name">身份证: </view>
			<input maxlength="18" v-model="auth_card" type="idcard" class="uni-input" placeholder-style="color:#c7c7c7"  focus placeholder="请输入身份证号" />
		</view>
		<!-- 手持 -->
		<!-- <view class="box">
			<view class="idCard">
				<text class="coverPic title">上传手持身份证</text>
				<view class="main">
					<view class="picture" v-if="coverHold">
						<image class="pic" :src="coverHold" mode=""></image>
						<view class="delPic" @click="delPicHold">
							<text class="del">x</text>
						</view>
					</view>
					<view class="livePic" v-if="!coverHold">
						<image class="pic" @click="addPhotoHold" src="../../static/images/cover.png"></image>
					</view>
				</view>
			</view>
			<view class="example">
				<text class="txt">示例:</text>
				<view class="boxPic">
					<view class="picture">
						<image class="pic" src="../../static/images/hold.png" mode=""></image>
					</view>
					<view class="rules">
						<view>1. 拍摄清晰的本人身份正面照
							<view>(照片不超过20M)</view>
						</view>
						<view>2. 请确保手持身份证与填写的身份证信息一致</view>
					</view>
				</view>
			</view>
		</view> -->
		<!-- 正面 -->
		<view class="box " style="display: flex;justify-content: space-between;margin: 0 30rpx;">
			<view class="idCard">
				<text class="coverPic title">上传身份证正面</text>
				<view class="main">
					<view class="picture" v-if="coverFront">
						<image class="pic"  :src="coverFront" mode=""></image>
						<view class="delPic"  @click="delPicFront">
							<text class="del">x</text>
						</view>
					</view>
					<view class="livePic"  v-if="!coverFront">
						<image class="pic" @click="addPhotoFront" src="../../static/images/cover.png"></image>
					</view>
				</view>
			</view>
			<view class="example">
				<text class="txt">示例: </text>
				<view class="boxPic">
					<view class="picture"  style="width: 260rpx;">
						<!-- <image class="pic" src="../../static/images/front.png" mode=""></image> -->
						<image class="pic" style="width: 260rpx;" src="/live/static/images/sfzz.png" mode=""></image>
					</view>
					<!-- <view class="rules">
						<view>1、拍摄清晰的本人身份证正面照
							<view>(照片不超过20M)</view>
						</view>
						<view>2、请确保手持的身份证与填写的身份证信息一致</view>
					</view> -->
				</view>
			</view>
		</view>
		<!-- 背面 -->
		<view class="box" style="display: flex;justify-content: space-between;margin: 0 30rpx;">
			<view class="idCard">
				<text class="coverPic title">上传身份证背面</text>
				<view class="main">
					<view class="picture" v-if="coverHack">
						<image class="pic"  :src="coverHack" mode=""></image>
						<view class="delPic" @click="delPicHack">
							<text class="del" >x</text>
						</view>
					</view>
					<view class="livePic"  v-if="!coverHack">
						<image class="pic" @click="addPhotoHack" src="../../static/images/cover.png"></image>
					</view>
				</view>
			</view>
			<view class="example">
				<text class="txt">示例: </text>
				<view class="boxPic">
					<view class="picture"  style="width: 260rpx;">
						<!-- <image class="pic" src="../../static/images/back.png" mode=""></image> -->
						<image class="pic" style="width: 260rpx;" src="/live/static/images/sfzf.png" mode=""></image>
					</view>
					<!-- <view class="rules">
						<view>1、身份证背面需清晰拍摄有效期限位置
							(照片不超过20M)
						</view>
						<view>2、身份证有效期需一个月以上</view>
					</view> -->
				</view>
			</view>
		</view>
		<view class="radio">
			<view class="icon" :class="{active: cur == 1}" @click="clickFlag">
				<span class="iconfont icon-check" v-if="flag"></span>
			</view>
			<view class="read">
				<text>我已阅读并同意</text>
				<text class="yellow" @click="toAignAgreement">《用户协议》</text><text class="yellow" @click="toAignAgreementPrivacy">《用户隐私协议》</text>
			</view>
		</view>
		<view class="creButton">
			<button type="primary" :disabled="cur == 0" :class="{opacity: cur == 0}" @click="submit">确认并提交</button>
		</view>
	</view>
</template>

<script>
	const requImg = require("../../../common/api_sign/requImg.js")
	export default {
		data() {
			return {
				auth_card: '',
				flag: false,
				isShowHold: false,
				isShowFront: false,
				isShowHack: false,
				coverHold: '',
				coverFront: '',
				coverHack: '',
				cur: 0,
				auth_name:"",
				imgname1:"",
				imgname2:"",
				imgname3:"",
				retu:false
			};
		},
		onLoad(e) {
			if(e.retu){
				this.retu=e.retu
			}
			uni.setNavigationBarTitle({
			    title:"申请直播"
			});
			this.getInfo()
		},
		methods: {
			toAignAgreement() {
				uni.navigateTo({
				    url: '/live/aignAgreement/aignAgreement'
				});
			},
			toAignAgreementPrivacy() {
				uni.navigateTo({
				    url: '/live/aignAgreementPrivacy/aignAgreementPrivacy'
				});
			},
			getInfo(){//获取页面信息
				let that=this
				that.$util.request({
					url: '/live/index.php?act=api-member_live&op=applyLiveAuth',
					method: 'get',
					data: {},
				}).then(function(res) {
					if (res.error_code == 0) {
				
						that.auth_name=res.datas.live_member_auth_info.auth_name
						that.auth_card=res.datas.live_member_auth_info.auth_card
						//提交图片路径
						that.imgname1=res.datas.live_member_auth_info.id_card_img
						that.imgname2=res.datas.live_member_auth_info.auth_fm_imgurl
						that.imgname3=res.datas.live_member_auth_info.auth_sc_imgurl
						//渲染图片路径
						that.coverHold=res.datas.live_member_auth_info.id_card_img_url
						that.coverFront=res.datas.live_member_auth_info.auth_fm_imgurl_url
						that.coverHack=res.datas.live_member_auth_info.auth_sc_imgurl_url
						// 状态 -1：未提交过认证信息 0：已提交认证申请，但未审核 1：已审核通过 2：审核失败
						if(res.datas.state==0 || (res.datas.state==2&&!that.retu)){
							uni.redirectTo({
								url:"/live/user/apply/commitSuc?state="+res.datas.state+"&remark="+res.datas.live_member_auth_info.treatment_remark
							})
						}
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						});
					}
				})
			},
			submit() {
					let that = this;
					console.log(that.auth_name,that.auth_card,that.imgname2,that.imgname3);
					if(!that.auth_name||!that.auth_card||!that.imgname2|| !that.imgname3){
						// !that.imgname1||
						uni.showToast({
							title: '上传资料不能为空',
							icon: "none"
						});
						return false
					}
					
					// let idcardReg = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/; 
					// /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
					// alert(that.auth_card.length)
					 if( that.auth_card.length !=18 && that.auth_card.length!=15){
						 uni.showToast({
						 	title: '身份证格式错误',
						 	icon: "none"
						 });
						 return false
					}
					that.$util.request({
						url: '/live/index.php?act=api-member_live&op=applyLiveAuth',
						method: 'POST',
						data: {
							auth_name:that.auth_name,
							auth_card: that.auth_card,
							id_card_img: that.imgname1,
							auth_fm_imgurl: that.imgname2,
							auth_sc_imgurl: that.imgname3
						},
					}).then(function(res) {
						console.log(res.code);
						if (res.error_code == 0) {
						
							uni.showToast({
								title: '提交成功',
								duration: 2000,
								icon: "none",
								success() {
									setTimeout(()=>{
										uni.navigateBack({})
									},1500)
								}
							});
							
												
						} else {
							uni.showToast({
								title: res.message,
								icon: "none"
							});
						}
					})

			},
			clickFlag() {
				this.cur = !this.cur
				this.flag = !this.flag;
			},
			// 上传图片
			addPhotoHold() {
				let that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success(res) {
						const tempFilePaths = res.tempFilePaths;
						let  data = requImg.request("index.php?act=upload&op=uploadFile&buss_type="+that.$uploadType.uploadtype009);	
						uni.uploadFile({
						    url: that.$apiurl+'index.php?act=upload&op=uploadFile',
						    filePath: tempFilePaths[0],
						    name: 'file',
						    formData: {
						       key:data.key,
							   buss_type:data.buss_type,
						       api_sign:data.api_sign,
						       comefrom:data.comefrom,
						       api_time:data.api_time,
						       // api_member_id:data.api_member_id,
						       // api_member_name:data.api_member_name,
						    },
						    success: (uploadFileRes) => {
								let file=JSON.parse(uploadFileRes.data);
						        console.log(file);
								if(file.error_code==0){
									uni.showToast({
										title:'上传成功'
									})
									that.isShowHold = true;
									that.coverHold = file.datas.file_url;
									that.imgname1=file.datas.file_name;
								
									
								}
								else{
									uni.showToast({
										title:file.message
									})
								}

						    }
						});

					}
				})
			},
			addPhotoFront() {
				let that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success(res) {
						const tempFilePaths = res.tempFilePaths;
						let  data = requImg.request("index.php?act=upload&op=uploadFile&buss_type=5024009");
						uni.uploadFile({
						    url: that.$apiurl+'index.php?act=upload&op=uploadFile',
						    filePath: tempFilePaths[0],
						    name: 'file',
						    formData: {
						       key:data.key,
							   buss_type:data.buss_type,
						       api_sign:data.api_sign,
						       comefrom:data.comefrom,
						       api_time:data.api_time,
							   // api_member_id:data.api_member_id,
							   // api_member_name:data.api_member_name,
						    },
						    success: (uploadFileRes) => {
								console.log(uploadFileRes)
								uploadFileRes.data = uploadFileRes.data.replace(/^[\'\"]+|[\'\"]$/,"")
								uploadFileRes.data = uploadFileRes.data.replace(/(^\s*)|(\s*$)/g, "");
								let file=JSON.parse(uploadFileRes.data);
								if(file.error_code==0){
									uni.showToast({
										title:'上传成功'
									})
									that.isShowFront = true;
									that.coverFront =file.datas.file_url;
									that.imgname2=file.datas.file_name;
								}else{
									uni.showToast({
										title:file.message,
										icon:"none"
									})
								}
						    }
						});
					}
				})
			},
			addPhotoHack() {
				let that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success(res) {
					let  data = requImg.request("index.php?act=upload&op=uploadFile&buss_type=5024009");
					const tempFilePaths = res.tempFilePaths;
					uni.uploadFile({
					    url: that.$apiurl+'index.php?act=upload&op=uploadFile',
					    filePath: tempFilePaths[0],
					    name: 'file',
					    formData: {
					        key:data.key,
							buss_type:data.buss_type,
					        api_sign:data.api_sign,
					        comefrom:data.comefrom,
					        api_time:data.api_time,
							// api_member_id:data.api_member_id,
							// api_member_name:data.api_member_name,
					    },
					    success: (uploadFileRes) => {
							let file=JSON.parse(uploadFileRes.data);
					        console.log(file);
							if(file.error_code==0){
								uni.showToast({
									title:'上传成功'
								})
								
								that.isShowHack = true;
								that.coverHack = file.datas.file_url
								that.imgname3=file.datas.file_name;
							}
							else{
								uni.showToast({
									title:file.message
								})
							}
					    }
					});
					}
				})
			},
			delPicHold() {
				this.coverHold = '';
				this.imgname1="";
				this.isShowHold = false;
			},
			delPicFront() {
				this.coverFront = '';
				this.imgname2="";
				this.isShowFront = false;
			},
			delPicHack() {
				this.coverHack = '';
				this.imgname3="";
				this.isShowHack = false;
			},
		}
	};
</script>

<style lang="scss" scoped>
	.Name{
		width: 100rpx;
	}
	.main {
		display: flex;

		.picture {
			position: relative;
			margin-right: 10rpx;

			.pic {
				margin-top: 40rpx;
				width: 260rpx;
				height: 200rpx;
			}

			.delPic {
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				top: 35rpx;
				right: 0rpx;
				height: 25rpx;
				width: 25rpx;
				background-color: red;
				border-radius: 50%;

				.del {
					margin-bottom: 5rpx;
				}
			}
		}

		.livePic {
			.pic {
				margin-top: 40rpx;
				width: 200rpx;
				height: 200rpx;
			}
		}
	}

	.opacity {
		opacity: .4;
	}

	.applyLive_info {
		background-color: #FFFFFF;
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
		.line {
			border-top: 4rpx solid #f5f8f9;
			padding: 30rpx 0 0 0;
			background-color: #FFFFFF;
		}

		.uni-form-item {
			// margin-bottom: 20rpx;
			font-size: 30rpx;
			font-family: "Adobe Heiti Std";
			align-items: center;
			background-color: #FFFFFF;
			.title {
				float: left;
			}

			.uni-input {
				padding: 0 20rpx;
				font-size: 30rpx;
			}
		}

		.idCard {
			.title {
				height: 80rpx;
				font-size: 30rpx;
				font-family: "Adobe Heiti Std";
			}
		}

		.example {
			// width: 100%;
			// margin-top: 20rpx;

			.txt {
				display: block;
				margin-bottom: 20rpx;
				font-size: 30rpx;
				font-family: "PingFangSC";
				color: rgb(102, 102, 102);
			}

			.boxPic {
				display: flex;
				justify-content: space-between;
				margin-bottom: 80rpx;

				.picture {
					width: 200rpx;
					height: 193rpx;
					.pic {
						width: 200rpx ;
						height: 193rpx;
					}
				}

				.rules {
					margin-left: 10rpx;
					line-height: 40rpx;
					margin-right: 10rpx;
					font-size: 24rpx;
					font-family: "Microsoft YaHei";
					color: rgb(153, 153, 153);
				}
			}
		}

		.radio {
			position: relative;
			height: 50rpx;
			display: flex;
			align-items: center;

			.icon {
				display: flex;
				justify-content: center;
				align-items: center;
			
				border-radius: 50%;
				width: 30upx;
				height: 30upx;
				border: 1rpx solid #ccc;

				span {
					color: #fff;
					font-size: 12upx;
				}
			}

			.active {
				background-color: #E82C58;
			}

			.read {
				margin-left: 20rpx;
				text {
					font-size: 24rpx;
					font-family: "Microsoft YaHei";
					color: rgb(153, 153, 153);
				}
				.yellow {
					color: #E82C58;
				}
			}

		}

		.creButton {
			margin: 30rpx 0;

			button {
				width: 100%;
				border-radius: 30upx;
				background-image: -moz-linear-gradient(to right,#bf0250,#E82C58);
				background-image: -webkit-linear-gradient(to right,#bf0250,#E82C58);
				background-image: -ms-linear-gradient(to right,#bf0250,#E82C58);
				background-image: linear-gradient(to right,#bf0250,#E82C58);
			}
		}
	}
	.box{
		margin-top: 10rpx;
	}
</style>
